<template>
  <div class="order">
    <div class="order-left">
      <van-sidebar v-model="activeKey" title-active-color="#fec300">
        <van-sidebar-item
          v-for="(item, index) in orderInfo"
          :key="index"
          :title="item.name"
          :name="item.name"
          @click="onChange(index)"
        />
      </van-sidebar>
    </div>
    <div class="content" id="bsDom">
      <van-index-bar :index-list="indexList" :sticky="false">
        <div v-for="(item, index) in orderInfo" :key="item.name" :id="index">
          <van-index-anchor :index="index" ref="floor">{{
            item.name
          }}</van-index-anchor>
          <van-cell>
            <van-card
              v-for="it in item.foods"
              :key="it.id"
              :price="it.price.toFixed(2)"
              :title="it.name"
              :desc="it.goodsDesc"
              :thumb="it.imgUrl"
              @click-thumb="toDetail(it)"
            >
              <template #tags>
                <span name="月售" style="color: #b5b5b5; font-size: 12px"
                  >月售{{ it.sellCount }}份</span
                >
                <span
                  name="好评度"
                  style="color: #b5b5b5; font-size: 12px; margin-left: 10px"
                  >好评度{{ it.rating }}%</span
                >
              </template>
              <template #footer>
                <p class="btn">
                  <span
                    class="reduce"
                    v-show="it.num > 0 ? true : false"
                    @click="addNum(it.id, (num = -1))"
                    ><van-icon name="minus"
                  /></span>
                  <span class="num">{{ it.num }}</span>
                  <span class="add" @click="addNum(it.id, (num = 1))"
                    ><van-icon name="plus"
                  /></span>
                </p>
              </template>
            </van-card>
          </van-cell>
        </div>
      </van-index-bar>
    </div>
    <!-- 购物车 -->
    <div
      class="shopcart"
      @click="$store.state.actionShow = !$store.state.actionShow"
    >
      <div class="contact">
        <van-icon name="smile-o" />
        <span>联系商家</span>
      </div>
      <div class="goSell">
        <div class="goSell-cart">
          <van-badge
            :style="
              getTotalPrice > 0
                ? 'background:rgba(255, 195, 0);'
                : 'background:#333333;'
            "
            class="i"
            :content="$store.state.content"
          >
            <van-icon
              :color="getTotalPrice > 0 ? '#000' : '#999999'"
              name="cart"
            />
          </van-badge>
          <p>
            <span class="price">￥{{ getTotalPrice.toFixed(2) }}</span>
            <span>另需配送费￥4元 | 支持自取</span>
          </p>
        </div>
        <p
          class="btn"
          :style="
            getTotalPrice > 0
              ? 'background:rgba(255, 195, 0);'
              : 'background:rgba(34, 34, 34);'
          "
        >
          <span v-show="$store.getters.shopCartList.length > 0 ? true : false"
            >去结算</span
          >
          <span
            style="font-size: 12px; color: white"
            v-show="$store.getters.shopCartList.length <= 0 ? true : false"
            >￥20元起送</span
          >
        </p>
      </div>
    </div>
    <!-- 购物车面板 -->
    <van-popup
      v-model="$store.state.actionShow"
      round
      position="bottom"
      style="height: 40%"
    >
      <shop-cart></shop-cart>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { goodList } from "@/apis/commod";
import BScroll from "better-scroll";
import ShopCart from "@/views/ShopCart.vue";
//食物信息规则
interface Ifood {
  category?: string;
  ctime?: string;
  goodsDesc?: string;
  id?: number;
  imgUrl?: string;
  name?: string;
  price?: number;
  rating?: number;
  ratings?: Array<string>;
  sellCount?: number;
}
//商品信息规则
interface IorderData {
  name: string;
  foods: Array<Ifood>;
}
interface InewArr {
  min: number;
  max: number;
  i: number;
}

@Component({
  components: {
    ShopCart,
  },
})
export default class commodities extends Vue {
  //左侧默认第一个激活
  activeKey = 0;
  contentkey = 0;
  // 总价
  totalPrice = 0;
  // 商品选择数量
  content = 0;

  indexList: Array<number> = [];
  // 遮罩层
  show: boolean = false;
  //better-scroll的初始化dom的变量
  BSDOm: any;
  //购物车动作面板

  async created(): Promise<void> {
    let res = await goodList();
    // console.log(res);
    //把后端获取到的商品数据存到Vuex
    this.$store.commit("getData", res.data.goodsList);
  }
  get orderInfo(): Array<IorderData> {
    return this.$store.state.orderInfo;
  }
  onChange(index: number): void {
    console.log(index);
    let dom = document.getElementById(index + "");
    this.BSDOm.scrollToElement(dom, 300);
    // this.activeKey = index;
  }
  toDetail(child: Ifood): void {
    if (child) {
      this.$router.push({
        path: "/detail",
        query: { foods: JSON.stringify(child) },
      });
    }
  }

  mounted() {
    let dom: any = document.getElementById("bsDom");
    this.BSDOm = new BScroll(dom, { click: true, probeType: 3 });
    // console.log(1);

    this.BSDOm.on("scroll", (pos: any) => {
      // console.log(pos);
      // console.log(this.rightBoxH);
      let _y: number = Math.abs(pos.y);
      // console.log(_y);

      let a = this.rightBoxH;
      for (let item of a) {
        if (_y >= item.min && _y < item.max) {
          this.activeKey = item.i;
        }
        // console.log(obj);
      }
    });
  }
  addNum(id: number, num: number) {
    this.$store.commit("add", { id: id, num: num });
  }
  get getTotalPrice(): number {
    let total: number = 0;
    let a = this.$store.getters.shopCartList;
    for (const obj of a) {
      if (obj.num > 0) {
        total += obj.num * obj.price;
      }
    }
    return total;
  }
  get rightBoxH(): Array<InewArr> {
    let arr: Array<number> = [];
    for (let i: number = 0; i < this.$store.state.orderInfo.length; i++) {
      let dom: any = document.getElementById(i + "")?.offsetHeight;
      arr.push(dom);
    }
    let min: number = 0;
    let newArr: Array<InewArr> = arr.map((item: number, index: number) => {
      let obj = { min: min, max: min + item, i: index };
      min += item;
      return obj;
    });
    return newArr;
  }
}
</script>

<style lang="scss" scoped>
.order {
  flex: 1;
  display: flex;
  overflow: hidden;
  .order-left {
    width: 90px;
    overflow: scroll;
  }
  .order-left::-webkit-scrollbar {
    display: none;
  }
  .content {
    flex: 1;
    overflow: scroll;
    .title {
      background: #f4f4f4;
      padding: 10px;
      font-size: 16px;
      position: relative;
      &::after {
        width: 3px;
        height: 100%;
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        background: #ddd;
      }
    }
  }
}
::v-deep .van-index-bar__sidebar {
  display: none;
}
.van-sidebar {
  width: 90px;
}
.van-button--mini {
  width: 24px;
}
.van-sidebar-item--select::before {
  background: rgba(255, 195, 0);
  width: 3px;
}
.van-card__title {
  margin-bottom: 5px;
  font-weight: bold;
}
.van-card__desc {
  margin-bottom: 5px;
}

.btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .num {
    padding: 0 10px;
  }
  .reduce {
    border-radius: 50%;
    border: 1px solid #e7e7e7;
    width: 24px;
    height: 24px;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
    line-height: 24px;
  }
  .add {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background-color: rgba(255, 195, 0);
    font-size: 16px;
    text-align: center;
    line-height: 24px;
  }
}
.shopcart {
  z-index: 9999;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  overflow: hidden;
  border-radius: 30px;
  display: flex;
  height: 50px;
  justify-content: space-between;
  .contact {
    width: 20%;
    margin-right: 5px;
    background: rgba(34, 34, 34);
    display: flex;
    flex-direction: column;
    color: #b5b5b5;
    align-items: center;
    font-size: 12px;
    justify-content: center;
    i {
      font-size: 18px;
      margin-bottom: 5px;
    }
  }
  .goSell {
    flex: 1;
    background: rgba(34, 34, 34);
    display: flex;
    font-size: 14px;
    color: white;
    .goSell-cart {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 5px;
      .i {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: rgba(255, 195, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          font-size: 20px;
          color: #000;
        }
      }
      p {
        display: flex;
        flex-direction: column;
        span:last-child {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }
    .btn {
      width: 70px;
      background: rgba(255, 195, 0);
      display: flex;
      justify-content: center;
      align-content: center;
      line-height: 50px;
      text-align: center;
      color: #000;
      font-weight: bold;
      font-size: 14px;
    }
  }
}
::v-deep .van-badge {
  top: 10px;
  right: 10px;
}
</style>